
<script setup>
import GameCanvas from '../components/GameCanvas.vue'
import SidePanel from '../components/SidePanel.vue'
import { ref } from 'vue'

const gameStatus = ref('ready') // ready/playing/paused/over
const score = ref(0)
</script>

<template>
  <div class="tetris-container">
    <h1>Vue3 俄罗斯方块</h1>
    <div class="game-area">
      <GameCanvas
          :gameStatus="gameStatus"
          @score-update="updateScore"
          @game-over="handleGameOver"
      />
      <SidePanel
          :score="score"
          :isPaused="gameStatus === 'paused'"
          :isGameOver="gameStatus === 'over'"
          @start="startGame"
          @pause="pauseGame"
          @reset="resetGame"
      />
    </div>
  </div>
</template>
